<template>
    <el-table :data="taskList" style="width: 100%">
      <el-table-column prop="id" label="序号" width="180" />
      <el-table-column label="进度步骤" width="180">
        <template #default="{ row }">
          <el-select v-model="row.process" placeholder="请选择" @change="updateProcess(row)">
            <el-option v-for="option in processOptions" :key="option.value" :label="option.label" :value="option.value" />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="完成比例" width="180">
        <template #default="{ row }">
          <el-select v-model="row.processRate" placeholder="请选择" @change="updateProcessRate(row)" :disabled="isDisabled(row)" @focus="handleDisabledClick">
            <el-option v-for="option in rateOptions" :key="option.value" :label="option.label" :value="option.value" />
          </el-select>
        </template>
      </el-table-column>
    </el-table>
  </template>
  
  <script setup lang="ts">
  import { onMounted, ref } from "vue";
  import axios from "axios";
  
  const taskList = ref([]);
  const processOptions = [
    { label: "未开始", value: "未开始" },
    { label: "进行中", value: "进行中" },
    { label: "已结束", value: "已结束" }
  ];
  const rateOptions = [
    { label: "0%", value: "0%" },
    { label: "10%", value: "10%" },
    { label: "20%", value: "20%" },
    { label: "30%", value: "30%" },
    { label: "40%", value: "40%" },
    { label: "50%", value: "50%" },
    { label: "60%", value: "60%" },
    { label: "70%", value: "70%" },
    { label: "80%", value: "80%" },
    { label: "90%", value: "90%" },
    { label: "100%", value: "100%" }
  ];
  
  onMounted(async () => {
    await getTaskList();
  });
  
  const getTaskList = async () => {
    try {
      const res = await axios.get('http://localhost:9500/api/taskArrange/getList');
      taskList.value = res.data.data;
    } catch (error) {
      console.error('获取任务列表失败:', error);
    }
  };
  
  const updateProcess = async (row) => {
    try {
      await axios.put(`http://localhost:9500/api/taskArrange/update/${row.id}`, {
        process: row.process
      });
    } catch (error) {
      console.error('更新进度步骤失败:', error);
    }
  };
  
  const updateProcessRate = async (row) => {
    if (isDisabled(row)) {
      // 如果任务状态为 "未开始" 或 "已结束"，禁止修改完成比例
      return;
    }
    try {
      await axios.put(`http://localhost:9500/api/taskArrange/update/${row.id}`, {
        processRate: row.processRate
      });
    } catch (error) {
      console.error('更新完成比例失败:', error);
    }
  };
  
  const isDisabled = (row) => {
    return row.process === '未开始' || row.process === '已结束';
  };
  
  const handleDisabledClick = () => {
    console.error('不能修改完成比例，因为任务状态为 "未开始" 或 "已结束"');
  };
  </script>
  